import { Component, OnInit, ViewEncapsulation, AfterViewInit, EventEmitter } from '@angular/core';
import { CmHttp } from "./../../http-module/http.service";
import { ActivatedRoute, Router } from "@angular/router";
import { Store } from "@ngrx/store";
import { sortFn } from "./../quote-table/utils";
import { Subject } from "rxjs/Subject";
import { Observable } from "rxjs/Observable";
import { ReplaySubject } from "rxjs/ReplaySubject";
import { QuoteHeaders, TableOptions } from "./../quote-table/quote-table.component";
import { BASEURL } from "shared";

import {
  getId,
  ADD_NEW_TABLE,
  SET_SORT,
  UPDATE_DATA
} from "./../quote-table/quote-table-state";

import "./../../shared/rxjs-operators";

const getParams = symbols => {
  return symbols.reduce((str, symbol) => `${str}symbol=${symbol}&`, "?");
};

@Component({
  selector: 'block-mini',
  templateUrl: 'block-mini.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    "block-mini.component.less"
  ],
  outputs: [
    "updateStock"
  ]
})
export class BlockMiniComponent implements OnInit, AfterViewInit {
  params;
  blockParams;
  blockSub;
  tabSub: Subject<any>;
  tabSource: Observable<any>;
  updateStock = new ReplaySubject(1);
  chartLists = ['MA', 'VOL'];

  chartConfig = {
    // mode: 0, // 默认模式0 九宫格模式1
    // theme: 0, // 默认白色颜色主题0
    scrollBar: false, // 是否显示底部滑动条
    // cursorInteract: false, // 是否允许光标交互
    // dragZoom: false, // 是否允许拖拽与缩放
    settingBtn: false, // 是否显示设置按钮
    title: false // 是否显示股票名称
  };
  placeSource = Observable.of("blockmini");

  tabList = [
    {
      text: "概念板块",
      id: "GN",
      dataUrl: `${BASEURL}/stock/quotes/block?type=GN`
    },
    {
      text: "行业板块",
      id: "HY",
      dataUrl: `${BASEURL}/stock/quotes/block?type=HY`
    },
    {
      text: "地域板块",
      id: "DY",
      dataUrl: `${BASEURL}/stock/quotes/block?type=DY`
    }
  ]

  blockTableOptions: TableOptions = {
    afterGetData: data => data.filter(data => { 
        return data.current !== 0 && data.volume
      }
    ),
    autoClickFirst: true,
    localSort: ["change_rate", "symbol", "change_amount", "current", "volume", "amount_in"],
    responsive: {
      enabled: true,
      // rowHeight: 24
    },
    subscribe: {
      enabled: true,
      channels: ["blockQuote"]
    },
    parts: {
      // pagination: false
    }
  }
  stockTableOptions: TableOptions = {
    afterGetData: data => data.filter(data => data.current !== 0),
    autoClickFirst: true,
    localSort: ["change_rate", "symbol", "change_amount", "current", "volume", "amount_in"],
    defaultLocalSort: "change_rate",    
    subscribe: {
      enabled: true,
      channels: ["dynPanel"]
    },
    responsive: {
      enabled: true
    },
    parts: {
      // pagination: false
    }
  }

  blockHeaders: QuoteHeaders = {
    headHeader: [
      {
        label: "版块名称",
        key: "name",
      },
      {
        label: "涨幅",
        key: "change_rate",
        withUpOrDown: true,
        withPercent: true,
        class: ["text-right"]
      },
      // {
      //   label: "五日涨幅",
      //   key: "day5_change",
      //   withUpOrDown: true,
      //   withPercent: true,
      //   class: ["text-right"]
      // },
      {
        label: "成交量",
        key: "volume",
        withUnit: true,
        class: ["text-right"]
      }
    ],
    bodyHeader: undefined
  }

  qouteHeaders: QuoteHeaders = require("./block-mini.headers.json");

  constructor(private http: CmHttp, private goRouter: Router) {
    this.blockSub = new Subject();
    this.tabSub = new Subject();
    this.tabSource = this.tabSub;
  }

  switchBlock(tab) {
    console.debug("Block Mini: switchBlock: ", tab);
    this.tabSub.next(tab);
  }

  openBlock(quote) {
    this.blockSub.next(quote);
    // this.updateStock.next(quote);
  }

  goCheckDetail(quote) {
    // console.debug("Quote Db Click: ", quote);
    this.goRouter.navigate([`/stock/${quote.symbol.replace(/\./, "_")}`]);
  }

  ngOnInit() {
    // this.tabSub.subscribe(tab => console.debug("Block Mini Tab: ", tab));

    let { http } = this;
    this.blockParams = this.blockSub.filter(quote => quote && quote.symbol).switchMap(quote => {
      console.debug("Switch Map: ", quote);
      return http.get(`${BASEURL}/stock/block2symbols/${quote.symbol}`);
    }).map(res => {
      console.debug("RES: ", res);
      return {
        id: res.type,
        method: "post",
        body: {
          symbol: res.symbols
        },
        dataUrl: `${BASEURL}/stock/summaries/dynpanel`
      };
    });
  }

  ngAfterViewInit() {
    // this.switchBlock(this.tabList[0]);
  }

}